CustomControl

Description

The CustomControl allows you to specify arbitrary HTML and Javascript for the control. You can specify the HTML and Javascript at design-time, or you can specify an Xbasic function that will generate the HTML and Javascript for the control at run-time.

A very powerful use case for the CustomControl is to dynamically generate a form based on a definition stored in a database.

Watch Video

When you add a CustomControl to a UX component, the PropertySheet for the control is displayed as follows

Clicking on the smart field for the Custom Control Properties brings up the builder. If you select the 'Specify Now' option in the Custom Control builder you can specify the HTML for the control and (optionally) any Javascript you want to execute before the UX is 'prepared' and after the UX has been rendered.

For example, if you wanted your CustomControl to render a standard UX component input control (called, say, 'CUSTOM1') you would add this code to the HTML:

<input id="{dialog.componentname}.V.R1.CUSTOM1" name="V.R1.CUSTOM1" class="{dialog.style}Edit" ></input>

And you would add this Javascript to the 'Javascript - Before Prepare' property:

{dialog.object}.columnInfo['CUSTOM1'] = { info: {controlType: 'Textbox'}, hiddenVal: false, type: 'input,label', isCalc: false, hlp: '', isArray: false, dataType: 'C' };

On the other hand, if you wanted your CustomControl to render a standard UX component button control (with an ID of, say, 'B1') you would add this code to the HTML:

<div id="B1" style="width: .5in;">MyButtonGoesHere</div>

And you would add this Javascript to the 'Javascript - After Render' property:

//add an event handler for the button
$e.add('B1',A5.d.evnts.click,function(e) {
alert('this is button b1');
},this,false,'B1');


//define a  new button object
{dialog.object}._buttons['B1'] = new A5.Button({
layout: 'text',
style: 'box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; width: 1.5in;',
html: 'Button',
onClick: function() { 
},
theme: '{grid.style}'
})

//bind the button object to the html element
{dialog.object}._buttons['B1'].bind('B1');

If you wanted to generate the HTML and Javascript at run-time you can set the Method to 'Xbasic' and then define an Xbasic function that generates the HTML and Javascript.